<template>
    <div class="app-container calendar-list-container">
      <!-- filter 条件查询 -->
      <div class="filter-container">
        <el-input
              @keyup.enter.native="getData"
              clearable
              v-model="listQuery.component"
              style="width: 150px;margin-right:15px;"
              placeholder="请输入客户品号"
        ></el-input>
        <el-input
              @keyup.enter.native="getData"
              clearable
              v-model="listQuery.orderPlanNo"
              style="width: 150px;margin-right:15px;"
              placeholder="请输入计划批号"
        ></el-input>
        <el-date-picker
        placeholder="开工时间"
          v-model="dateOptions"
          type="datetimerange"
          value-format="yyyy-MM-dd HH:mm:ss"
          format="yyyy-MM-dd HH:mm:ss"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          style="margin-right:15px;">
        </el-date-picker>
        <!-- <el-date-picker
          @keyup.enter.native="getData"
          clearable
          style="width: 150px; margin-right: 15px"
          class="filter-item"
          v-model="listQuery.scanTime"
          format="yyyy-MM-dd"
          type="datetime"
          placeholder="选择开工时间">
        </el-date-picker>
        <el-date-picker
          @keyup.enter.native="getData"
          clearable
          style="width: 150px; margin-right: 15px"
          class="filter-item"
          v-model="listQuery.scanTimeEnd"
          format="yyyy-MM-dd"
          type="datetime"
          placeholder="选择结束时间">
        </el-date-picker> -->
        <!-- <el-input
              @keyup.enter.native="getData"
              clearable
              v-model="listQuery.scanTimeEnd"
              style="width: 160px;margin-right:15px;"
              class="filter-item"
              placeholder="加工天数大于多少天"
        ></el-input> -->
        <el-button type="primary" v-waves icon="el-icon-search" @click="getData">搜索</el-button>
      </div>
  
      <!-- table 表格 -->
      <el-table  :data="tableInfo" element-loading-text="给我一首歌的时间" stripe border fit highlight-current-row style="width: 100%">
        <el-table-column label="序号" type="index" width="50"></el-table-column>
        <el-table-column label="客户品号"  prop="component"   align="center"/>
        <el-table-column label="计划批号" prop='orderPlanNo' align="center"/>
        <el-table-column label="开工时间" prop='scanTime' align="center"/>
        <el-table-column label="成品总数" prop='planNumberSum' align="center">
            <template slot-scope="scope" >
                  {{ scope.row.planNumberSum ? Math.floor(scope.row.planNumberSum) :'' }}
              </template>
        </el-table-column>
        <el-table-column label="工单总数" align="center"/>
        <el-table-column label="工序总数" prop="orderCount" align="center"/>
        <el-table-column label="未完成工序总数" prop="notOrderCount" align="center"/>
        <el-table-column label="数冲齐套率" align="center">
            <template slot-scope="scope" >
                {{ decimalToPercentage(scope.row.scUnison / scope.row.scUnisonCount) }}
            </template>
        </el-table-column>
        <el-table-column label="折弯齐套率" align="center">
            <template slot-scope="scope" >
                {{ decimalToPercentage(scope.row.szUnison / scope.row.szUnisonCount) }}
            </template>
        </el-table-column>
        <el-table-column label="钳铆齐套率" align="center">
            <template slot-scope="scope" >
                {{ decimalToPercentage(scope.row.qmUnison / scope.row.qmUnisonCount) }}
            </template>
        </el-table-column>
        <el-table-column label="数控车间齐套率" align="center">
            <template slot-scope="scope" >
                {{ decimalToPercentage((scope.row.orderCount - scope.row.notOrderCount)/scope.row.orderCount) }}
            </template>
        </el-table-column>
        <el-table-column label="加工周期" align="center">
            <template slot-scope="scope" >
                {{ dataTime(scope.row.scanTime) }}
            </template>
        </el-table-column>
      </el-table>
      
     <el-divider></el-divider>

     <el-button type="success" size="small" @click="hExportExcel">导出数据Excel</el-button>
  
     <!-- pagination 分页 -->
      <!-- <div class="pagination-container">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="listQuery.page"
          :page-sizes="[5,10, 20, 30, 40, 100, 300, 500]"
          :page-size="listQuery.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div> -->
   
    </div>
  </template>
  
  <script>
  import { findHisSetOfRatesNew } from '@/api/staffscan.js'
  export default {
        name: 'skComplete',
        data() {
          return {
            dateOptions: this.getNowTime(),
            listQuery: {
            },
            total: '',                                //返回信息总数
            formLabelWidth: '100px',                  //弹框内部组件的宽度设定
            tableInfo: [],                             //table表单内容
            userInfo: this.$store.state.user.userInfo,
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                    picker.$emit('pick', [start, end]);
                    }
                }]
            },
          }
        },
        methods: {
            getNowTime() {
                let dateTime = +new Date()+8*3600*1000
                const start = new Date(dateTime - 3600 * 1000 * 24 * 7)
                    .toISOString()
                    .replace('T', ' ')
                    .split('.')[0] //默认开始时间7天前
                const end = new Date(dateTime)
                    .toISOString()
                    .replace('T', ' ')
                    .split('.')[0]//默认结束时间当前时间
                console.log([start, end])
                return [start, end]
            },
            // 计算相差天数
            dataTime(time){
                var dataTime = new Date(time);
                // 获取当前时间
                var currentTime = new Date();
                // 计算时间差，单位为毫秒
                var timeDiff = currentTime - dataTime;
                // 将时间差转换为秒数
                var totalSecondsDiff = Math.floor(timeDiff / 1000);
                // 计算天数
                var days = Math.floor(totalSecondsDiff / (24 * 3600));
                totalSecondsDiff %= (24 * 3600);
                // 计算小时数
                var hours = Math.floor(totalSecondsDiff / 3600);
                totalSecondsDiff %= 3600;
                // 计算分钟数
                var minutes = Math.floor(totalSecondsDiff / 60);
                return days+ "天"+ hours+ "小时"+ minutes+ "分钟"
            },
            // 求百分比
            decimalToPercentage(decimal) {
                // if(!decimal){
                //     decimal = 0
                // }
                decimal ? decimal : decimal = 0
                // console.log(decimal);
              // 将小数乘以100，得到百分比形式
              var percentage = decimal * 100;
              // 使用toFixed方法将百分比保留两位小数
              percentage = percentage.toFixed(2);
              // 向下取整，使用parseInt或Math.floor方法
              percentage = Math.floor(percentage);
              // 拼接百分号
              percentage = percentage + '%';
              return percentage;
            },
            // 导出excel
        async hExportExcel() {
          let query = Object.assign({},this.listQuery)
            if(this.dateOptions){ query.scanTime = this.dateOptions[0],query.scanTimeEnd = this.dateOptions[1]}
            let res = await findHisSetOfRatesNew(query)
          const { header, data } = this.transformDat(this.setSort(res.data.mapList))
            import('@/vendor/Export2Excel').then(excel => {
            // excel表示导入的模块对象
            console.log(excel)
            excel.export_json_to_excel({
            header, // 表头 必填
            data, // 具体数据 必填
            filename: '数控车间齐套excel', // 文件名称
            autoWidth: true, // 宽度是否自适应
            bookType: 'xlsx' // 生成的文件类型
            })
          })
        },
        // 排序函数
         setSort(arr){
          let newArr = JSON.parse(JSON.stringify(arr))
          let arr1 = []
          newArr.forEach((item)=>{
            let obj = {
                component: item.component,
                orderPlanNo: item.orderPlanNo,
                scanTime: item.scanTime,
                planNumberSum: item.planNumberSum ? Math.floor(item.planNumberSum) :'',
                GGcount: '',
                orderCount: item.orderCount,
                notOrderCount: item.notOrderCount,
                scUnisonCount: this.decimalToPercentage(item.scUnison / item.scUnisonCount),
                szUnisonCount: this.decimalToPercentage(item.szUnison / item.szUnisonCount),
                qmUnisonCount: this.decimalToPercentage(item.qmUnison / item.qmUnisonCount),
                orderCountCount: this.decimalToPercentage((item.orderCount - item.notOrderCount)/item.orderCount),
                JGTime: this.dataTime(item.scanTime),
          }
          arr1.push(obj)
          })
          return arr1
        },
        transformDat(res) {
          const mapInfo = {
            component: '客户品号',
            orderPlanNo: '计划批号',
            scanTime: '开工时间',
            planNumberSum: '成品总数',
            GGcount: '工单总数',
            orderCount: '工序总数',
            notOrderCount: '未完成工序总数',
            scUnisonCount: '数冲齐套率',
            szUnisonCount: '折弯齐套率',
            qmUnisonCount: '钳铆齐套率',
            orderCountCount: '数控车间齐套率',
            JGTime: '加工周期',
          }
          // 对data进行格式化
          // 取出所有的属性名
          const props = Object.keys(res[0]) // ['id','']
          // 将属性名从英文转为中文
          const header = props.map(zhkey => mapInfo[zhkey])
          const data = res.map(obj => Object.values(obj))
          return { header, data }
        },
          getData(){
            if(!this.listQuery.component){
                delete this.listQuery.component
            }
            if(!this.listQuery.orderPlanNo){
                delete this.listQuery.orderPlanNo
            }
            if(!this.listQuery.scanTimeEnd){
                delete this.listQuery.scanTimeEnd
            }
            if(!this.listQuery.component){
                delete this.listQuery.component
            }
            this.handleFilter()
          },
          // 搜索按钮绑定的函数
          // 获取table表单数据与数据总数
          async handleFilter() {
            let query = Object.assign({},this.listQuery)
            if(this.dateOptions){ query.scanTime = this.dateOptions[0],query.scanTimeEnd = this.dateOptions[1]}
            let {data} = await findHisSetOfRatesNew(query)
            this.tableInfo = data.mapList
            this.total = data.count
          },
          // table表单下方的页码组件改变每页显示的数据条数
          handleSizeChange(val) {
          this.listQuery.limit = val
          this.handleFilter()
          },
          // table表单下方的页码组件改变页面
          handleCurrentChange(val) {
            this.listQuery.page = val
            this.handleFilter()
          }
        },
          // 进入页面获取table信息
        mounted() {
          this.handleFilter()
        }
  }
  </script>
  
  <style>
  
  </style>
